<template>
  <div>
    <div class="source_box">
      <!-- <div class="titlename">思政名师</div> -->
      <div class="szRouces">
        <el-carousel :interval="4000" type="card" height="240px">
          <el-carousel-item
            v-for="item in transerData"
            :key="item.dictLabel"
            style="
              border-radius: 10px;
              overflow: hidden;
              box-shadow: 5px 5px 10px rgb(194, 194, 194);
            "
          >
            <div class="medium">
              <div class="img-introduce">
                <img :src="item.remark" alt="" srcset="" />
              </div>
              <!-- <div class="name-introduce">
                <div class="name-p">{{ item.teachername }}</div>
                <div class="int-g">
                  <div class="introduce-p">{{ item.introduce }}</div>
                </div>
              </div> -->
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="post-conatianer">
        <div class="post-container-title-env">
          <i class="el-icon-s-finance" style="font-size: 20px"></i>发布中心
        </div>
        <div class="post-container-lists">
          <div class="post-container-item">
            <router-link target="_blank" to="/personalPost/postPictures">
              <i class="el-icon-edit"></i>
              发布帖子
            </router-link>
          </div>
        </div>
        <div class="post-container-lists">
          <div class="post-container-item" @click.prevent="targetPage()">
            <!-- <router-link
              target="_blank"
              to="/personalPost/postPictures"
             
            > -->
            <div>
              <i class="el-icon-edit"></i>
              发布图片
            </div>

            <!-- </router-link> -->
          </div>
        </div>
        <!-- <div>
          <router-link
            target="_blank"
            to="/personalPost/postPictures"
            class="post-msg"
          >
            <i class="el-icon-picture"></i>
            发布图片
          </router-link>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { getTeacherInfo } from "../../../api/szpt/indexPage/getTeacherMsg";
export default {
  name: "teacherCarousel",
  data() {
    return {
      teachers: {},
      transerData: [],
    };
  },
  created() {
    this.getInitialData();
  },
  methods: {
    targetPage() {
      this.$message.warning("功能正在开发中...");
    },
    // 名师Carousel
    async getInitialData() {
      const res = await getTeacherInfo();
      this.teachers = res.data.data;
    },
  },
  mounted() {
    this.getDicts("nav_picture_url").then((response) => {
      const data = response.data;
      this.transerData = data;
    });
  },
};
</script>

<style lang="scss" scoped>
.int-g {
  padding-top: 40px;
  padding-left: 10px;
  padding-right: 10px;
}

.medium {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.title-in {
  width: 100%;
  height: 30px;
  font-weight: bold;
  line-height: 30px;
}

.name-p {
  width: 100%;
  height: 30px;
  font-size: 26px;
  line-height: 30px;
  padding: 10px;
  font-weight: bold;
  color: #333;
}

.introduce-p {
  height: 40px;
  word-wrap: break-word;
}

.img-introduce {
  width: 100%;
  height: 100%;
}

.img-introduce img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.name-introduce {
  width: 62%;
  height: 100%;
}

.source_box {
  margin-top: 10px;
  width: 100%;
  height: 280px;
  border-radius: 10px;
  padding-bottom: 10px;
  display: flex;
  background-color: transparent;
}

.szRouces {
  width: 75%;
  height: auto;
  padding-bottom: 20px;
  min-height: 260px;
  text-decoration: none;
  background-color: transparent;
}

.titlename {
  width: 100%;
  height: 60px;
  line-height: 60px;
  padding-left: 10px;
  font-size: 30px;
  font-weight: bold;
  color: #666;
}

.el-carousel__item div {
  color: #475669;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.post-conatianer {
  width: 20%;
  height: fit-content;
  margin-left: 30px;
  border-radius: 8px;
  overflow: hidden;
  padding-bottom: 20px;

  background-color: rgb(255, 255, 255);
  .post-container-title-env {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: left;
    color: #333;
    padding-left: 10px;
    font-weight: bold;
    border-bottom: 1px solid #ececec;
  }
  .post-container-lists {
    width: 100%;
    height: auto;
    padding: 20px 0 20px 0;
    .post-container-item {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: center;
      a,
      div {
        width: 70%;
        height: 100%;
        line-height: 40px;
        background-color: rgb(0, 195, 255);
        font-weight: bold;
        border-radius: 5px;
        overflow: hidden;
        text-align: center;
        color: white;
        display: block;
        cursor: pointer;
      }
    }
  }
}
</style>
>
